<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('登录')"/>
    <link rel="stylesheet" href="admin/css/other/login.css" />
</head>
<body background="admin/images/background2.svg">
    <form class="layui-form" action="javascript:void(0);">
        <!-- logo dom -->
        <div class="layui-form-item">
            <img class="logo" src="admin/images/logo.png" />
            <div class="title">Pear Admin</div>
            <div class="desc">
                明 湖 区 最 具 影 响 力 的 设 计 规 范 之 一
            </div>
        </div>
        <!-- username input -->
        <div class="layui-form-item">
            <input name="username" type="text" placeholder="账 户 : admin " value="admin" hover class="layui-input"  />
        </div>
        <!-- password input -->
        <div class="layui-form-item">
            <input name="password" type="password" placeholder="密 码 : admin " value="admin" hover class="layui-input"  />
        </div>
        <!-- captcha input -->
        <div class="layui-form-item">
            <input placeholder="验证码 : " name="captcha" hover class="code layui-input layui-input-inline"  />
            <img src="/system/captcha/generate" class="codeImage" id="captchaImage"/>
        </div>
        <div class="layui-form-item">
            <input type="checkbox" name="remember-me" title="记住密码" lay-skin="primary">
        </div>
        <!-- submit button -->
        <div class="layui-form-item">
            <button class="pear-btn pear-btn-success login" lay-submit lay-filter="login">
                登 入
            </button>
        </div>
    </form>
<th:block th:include="include :: footer"/>
<script>
    layui.use(['form','jquery','layer'], function() {
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;

        form.on('submit(login)', function(data){
            let loader = layer.load();
            $(".login").html("<i class='layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-icon-loading' />");
            $.ajax({
                url:'/login',
                data:data.field,
                type:"post",
                dataType:'json',
                success:function(result){
                    layer.close(loader);
                    if(result.success){
                        layer.msg(result.msg,{icon:1,time:1000},function(){
                            location.href = "/index";
                        })
                    }else{
                        layer.msg(result.msg,{icon:2,time:1000},function(){
                            document.getElementById("captchaImage").src="/system/captcha/generate?"+Math.random();
                        });
                    }
                    $(".login").html("登 入")
                }
            });
            return false;
        });

        $("#captchaImage").click(function(){
            document.getElementById("captchaImage").src="/system/captcha/generate?"+Math.random();
        })
        setInterval(function(){
            document.getElementById("captchaImage").src="/system/captcha/generate?"+Math.random();
        },30000);

        validateKickout();
    })

</script>
<!-- Session 过期处理 -->
<script>
    if(window!=top){ top.location.href = location.href; }

    function validateKickout() {
        if (getParam("abnormalout") == 1) {
            layer.alert("<p style='color:red'>您已在别处登录，请您修改密码或重新登录</p>", {
                    icon: 0,
                    title: "系统提示"
                },
                function(index) {
                    layer.close(index);
                });
        }else if(getParam("sessionout") == 1){
            layer.alert("<p style='color:red'>登录已过期，请重新登录</p>", {
                    icon: 0,
                    title: "系统提示"
                },
                function(index) {
                    layer.close(index);
                });
        }
    }

    function getParam(paramName) {
        var reg = new RegExp("(^|&)" + paramName + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURI(r[2]);
        return null;
    }
</script>
</body>
</html>